<template>
  <el-dialog
    title="工作页信息页导入"
    :visible.sync="isShow"
    width="800px"
    @close="handleClose"
  >
    <div>
      <div class="flex_center">
        <div class="item_l">
          <div class="import-item">
            <div>选择操作功能：</div>
            <el-select v-model="operaType" placeholder="请选择">
              <el-option
                v-for="item in operaTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="import-item" v-if="operaType==3||operaType==4">
            <div>选择已有任务：</div>
            <el-select v-model="taskIndexId" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="import-item">
            <div>上传文档：</div>
            <input type="file" ref="file" @change="handleFileChange" accept=".docx" :multiple="false">
          </div>
          <div class="import-item import-btn">
            <el-button type="primary" @click="handleImport" v-preventReClick style="width: 120px">导入</el-button>
          </div>
        </div>
        <div class="item_r">
          <h4 style="margin-bottom: 10px">功能说明：</h4>
          <p>
            1、本功能适用于将工作页和信息页文档内容转化为课程内容。目前仅支持基于《工学一体化学习任务工作页》、《工学一体化学习任务信息页》体例编辑的文档，暂不支持非工学一体化课程或其他非标文档；
          </p>
          <p>
            2、因AI能力对文档长度有要求，仅支持一个任务导入；
          </p>
          <p>
            3、目前仅支持word文档*.docx格式；
          </p>
          <p>
            4、AI处理具有一定的随机性，请在导入后检查内容；
          </p>
          <p>
            5、导入需要一定的时间，请耐心等待。
          </p>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { aiImportCourse, aiImportCourseLogList, taskIndexList } from '@/api/AIImport'

export default {
  name: 'ImportInformation',
  props: {
    courseId: {
      type: [Number, String],
      default: void 0
    }
  },
  data() {
    return {
      isShow: false,
      contentType: 1,
      operaType: 1,
      taskIndexId: void 0,
      options: [],
      tableData: [],
      total: 1,
      pageNum: 1,
      pageSize: 5,
      file: void 0,
      operaTypeList: [
        {
          id: 1,
          name: '新增任务及其工作页'
        },
        {
          id: 2,
          name: '新增任务及其信息页'
        },
        {
          id: 3,
          name: '已有任务填充工作页'
        },
        {
          id: 4,
          name: '已有任务填充信息页'
        }

      ]

    }
  },
  methods: {
    show() {
      this.isShow = true
      this.getOptions()
      // this.getList()
    },
    resetForm() {
      this.$refs.file.value = ''
      this.file = void 0
      this.pageNum = 1
      this.pageSize = 5
      this.tableData = []
      this.contentType = 1
      this.operaType = 1
      this.taskIndexId = void 0
    },
    handleClose() {
      this.resetForm()
      this.isShow = false
    },
    handleFileChange(e) {
      this.file = e.target.files[0]
    },
    async handleImport() {
      if (this.operaType == 3 || this.operaType == 4) {
        if (!this.taskIndexId) {
          this.$message.error('请选择任务')
          return
        }
      }
      if (!this.file) {
        this.$message.error('请选择文件')
        return
      }
      if (this.operaType == 1 || this.operaType == 3) {
        this.contentType = 2
      } else {
        this.contentType = 1
      }
      let text = '确定要导入该文件吗，执行导入后该课程不可以进行编辑等操作！！！'
      let formData = new FormData()
      formData.append('file', this.file)
      formData.append('contentType', this.contentType)
      formData.append('operaType', this.operaType)
      if (this.taskIndexId || this.taskIndexId == 0) {
        formData.append('taskIndexId', this.taskIndexId)
      }
      formData.append('courseId', this.courseId)
      this.$confirm(`${text}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const loading = this.$loading({
          lock: true,
          text: '正在上传文件，请稍后',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.3)'
        })
        try {
          let res = await aiImportCourse(formData)
          if (res.code == 200) {
            this.$message.success('上传成功')
            this.handleClose()
            this.$store.dispatch('startPolling')
            // this.getList()
          }
        } catch (e) {
          console.log(e)
        } finally {
          loading.close()
        }
      }).catch(() => {
        this.$modal.msgInfo('已取消')
      })

    },
    async getList() {
      try {
        let res = await aiImportCourseLogList(this.courseId, {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        if (res.code == 200) {
          this.total = res.total
          this.tableData = res.rows
        }
      } catch (e) {
        console.log(e)
      }
    },
    async getOptions() {
      try {
        let res = await taskIndexList(this.courseId)
        if (res.code == 200) {
          this.options = res.data
        }
      } catch (e) {
        console.log(e)
      }
    }
  }

}
</script>
<style scoped lang="scss">
.flex_center {
  display: flex;
  align-items: flex-start;
  margin: 40px 0 50px;

  .item_l {
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .item_r {
    line-height: 2;
    width: 50%;
    margin-top: 20px;
    margin-left: 30px;
  }

}

.import-item {
  display: flex;
  align-items: center;
}

.import-item:first-child {
  margin-top: 20px;
}

.import-btn {
  justify-content: center;
}

.table-container {
  margin-top: 40px;

  .title {
    font-weight: 500;
    margin-bottom: 20px;
  }
}
</style>
